package com.appbee.media.client.ui;

import javax.inject.Inject;

import com.appbee.core.client.design.PageStyle;
import com.appbee.core.client.ui.IMessageView;
import com.appbee.core.client.ui.MessageView;
import com.appbee.media.client.design.ThumbnailCellListResources;
import com.appbee.media.client.design.ThumbnailCellListStyle;
import com.appbee.media.client.presenter.MediaUploadActivity;
import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.Style.BorderStyle;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.event.dom.client.ChangeEvent;
import com.google.gwt.event.dom.client.ChangeHandler;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.Widget;


public class MediaUploadView extends Composite implements MediaUploadActivity.View
{

	private static MediaUploadViewUiBinder uiBinder = GWT
			.create(MediaUploadViewUiBinder.class);

	interface MediaUploadViewUiBinder extends UiBinder<Widget, MediaUploadView>
	{
	}
	@UiField(provided=true)
	PageStyle style;
	
	@UiField(provided=true)
	MessageView messageView;
	
	@UiField
	SimplePanel uploaderPanel;
	
	@UiField
	FlowPanel imgPanel;
	
	private final MultiFileInput uploader;
	private MediaUploadActivity activity;


	private final ThumbnailCellListStyle cellListStyle;


	@Inject
	public MediaUploadView(PageStyle style,
			ThumbnailCellListResources thumbnailRes,
			MessageView messageView)
	{
		this.style = style;
		cellListStyle = thumbnailRes.cellListStyle();
		cellListStyle.ensureInjected();
		this.messageView = messageView;
		initWidget(uiBinder.createAndBindUi(this));
		uploader = new MultiFileInput();

		uploader.addChangeHandler(new ChangeHandler()
		{
			
			@Override
			public void onChange(ChangeEvent event)
			{
				activity.upload(uploader.getFiles());
			}

		});
		uploaderPanel.setWidget(uploader);
		imgPanel.setStyleName(cellListStyle.cellListWidget());
		
	}

	@Override
	public void setPresenter(MediaUploadActivity presenter)
	{
		this.activity = presenter;
	}

	@Override
	public IMessageView getMessageView()
	{
		return messageView;
	}

	@Override
	public ImageView addImage(String name,int size)
	{
		ImageView img = new ImageView(name,size);
		imgPanel.add(img);
		return img;
	}

	class ImageView extends Widget implements MediaUploadActivity.ImageView
	{
		Element progressDiv;
		Element img;
		
		public ImageView(String name,int size)
		{
			Element div = DOM.createDiv();
			setElement(div);
			setStyleName(cellListStyle.cellListEvenItem());
			img = DOM.createImg();
			img.setAttribute("width", "300");
			img.setAttribute("height","200");
			Element elName = DOM.createDiv();
			elName.setInnerHTML(name+", ("+size+"b)");
			progressDiv = DOM.createDiv();
			progressDiv.getStyle().setBorderColor("#333");
			progressDiv.getStyle().setBorderStyle(BorderStyle.SOLID);
			progressDiv.getStyle().setBorderWidth(1, Unit.PX);
			
			div.appendChild(elName);
			div.appendChild(progressDiv);
			
			
		}
		
		@Override
		public void setImageData(String data)
		{
			img.setAttribute("src", data);
		}

		@Override
		public void setLoadedProcent(int p)
		{
			progressDiv.getStyle().setWidth(p*3, Unit.PX);
			progressDiv.setInnerText(p+"%");
		}

		@Override
		public void setError(String error)
		{
			progressDiv.setInnerText(error);
		}

		@Override
		public void showMedia(String mediaId)
		{
			Element div = getElement();
			div.setInnerHTML("");
			img.setAttribute("src", "/thumbnail?id="+mediaId);
			div.appendChild(img);
		
		}
		
	}

}
